import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Dropdown, Space, message, Modal, Button } from 'antd';
import { CaretRightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const HeaderDropDown: React.FC = () => {

    const [modelTitle, setMmodelTitle] = useState<string>('是否前往大屏展示总览页面？')

    const navigate = useNavigate();

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const showModal = (todo: string) => {
        if(todo === 'admin') {
            setMmodelTitle('是否前往后台管理页面？')
        }
        if(todo === 'login') {
            setMmodelTitle('确定退出登录吗？')
        }
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setIsModalOpen(false);
            setConfirmLoading(false);
            if(modelTitle === '是否前往后台管理页面？') { 
                navigate('/admin'); 
            }
            if(modelTitle === '确定退出登录吗？') { 
                navigate('/'); 
                message.success('退出成功');
            }
        }, 800);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const items: MenuProps['items'] = [
        {
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={() => { message.info('此功能暂不支持') }}>
                    用户中心
                </a>
            ),
            key: '0',
        },
        {
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={() => { message.info('此功能暂不支持') }}>
                    系统设置
                </a>
            ),
            key: '1',
        },
        {
            label: (
                <span onClick={ () => showModal('admin') }>后台管理</span>
            ),
            key: '2',
        },
        {
            type: 'divider',
        },
        {
            label: (
                <span onClick={ () => showModal('login') }>退出登录</span>
            ),
            key: '3',
        },
    ];

    return (
        <>
        <Dropdown menu={{ items }} placement="bottomRight" arrow>
            <a onClick={(e) => e.preventDefault()}>
            <Space>
                <Button 
                    type="link"
                    style={{ 
                        width: '80px',
                        height: '24px',
                        fontSize: '12px',
                        color: 'rgba(255, 255, 255, 1)',
                        pointerEvents: 'auto',
                        backgroundImage: 'url(/imgs/visual/header01.png)',
                        backgroundSize: '100% 100%',
                    }}
                >
                    更 多
                    <CaretRightOutlined />
                </Button>
            </Space>
            </a>
        </Dropdown>

        <Modal
            title={ modelTitle }
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={[
            <Button key="back" onClick={handleCancel}>
                取 消
            </Button>,
            <Button key="submit" type="primary" loading={confirmLoading} onClick={handleOk}>
                确 认
            </Button>,
            ]}
        >
        </Modal>
        </>
    )
} ;

export default HeaderDropDown;